<template>
  <div class="login-page">
    <!-- 视频背景 -->
    <video class="background-video" autoplay loop muted>
      <source :src="Mp4" type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <!-- 忘记密码 -->
    <div class="login-form-container">
      <h3>修改密码</h3>
      <el-form
        class="login-form"
        ref="ruleFormPwd"
        style="max-width: 600px"
        :model="editPwd"
        status-icon
        :rules="rules"
        label-width="auto"
        @keyup.enter="submitForm(ruleFormPwd)"
      >
        <!-- 账号 -->
        <el-form-item label="账号" prop="username">
          <el-input
            v-model.number="editPwd.username"
            autocomplete="off"
            :prefix-icon="User"
            placeholder="请输入账号"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="新密码" prop="password">
          <el-input
            v-model="editPwd.password"
            type="password"
            autocomplete="off"
            :prefix-icon="Lock"
            placeholder="请输入新密码"
            show-password
          />
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="editPwd.confirmPassword"
            type="password"
            autocomplete="off"
            :prefix-icon="Lock"
            placeholder="请确认密码"
            show-password
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="valicode">
          <el-input
            v-model="editPwd.valicode"
            type="text"
            autocomplete="off"
            :prefix-icon="Lock"
            placeholder="请输入验证码"
            show-password
          />
        </el-form-item>
        <div class="btn_style">
          <el-button
            type="primary"
            @click="submitForm(ruleFormPwd)"
            :loading="submitLoading"
            >确定</el-button
          >
          <el-button @click="resetForm(ruleFormPwd)">重置</el-button>
          <el-button @click="cancel">返回登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, watch } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { Lock, User } from "@element-plus/icons-vue";
import { AccountEditPasswordReq } from "@/api/req";
import { AccountApi } from "@/api/api";
import { useRouter } from "vue-router";
import Mp4 from "@/assets/paper-planes.mp4";

// 表单实列
const ruleFormPwd = ref<FormInstance>();

const router = useRouter();

const data = reactive<{
  submitLoading: boolean;
  editPwd: AccountEditPasswordReq;
  forgetDialog: boolean;
}>({
  // loading
  submitLoading: false,
  // 修改密码
  editPwd: {
    // 账号
    username: "",
    // 密码
    password: "",
    // 确认密码
    confirmPassword: "",
    // 验证码
    valicode: "",
  },
  // 忘记密码弹窗状态
  forgetDialog: false,
});

// 自定义验证方法，用于校验用户名
const matchUsername = (
  rule: any,
  value: string,
  callback: (error?: Error) => void
): void => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else if (value.toString().length !== 11) {
    callback(new Error("请输入11位账号"));
  } else {
    callback();
  }
};
// 自定义验证方法，用于校验密码
const valiPassword = (
  rule: any,
  value: string,
  callback: (error?: Error) => void
): void => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (value.length < 6) {
    callback(new Error("密码最少6位"));
  } else {
    callback();
  }
};

// 自定义验证方法，用于确认密码
const matchPassword = (
  rule: any,
  value: string,
  callback: (error?: Error) => void
): void => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== data.editPwd.password) {
    callback(new Error("两次输入的密码不匹配"));
  } else if (value.length < 6) {
    callback(new Error("密码最少6位"));
  } else {
    callback();
  }
};

// 表单校验规则
const rules = reactive<FormRules<typeof editPwd>>({
  username: [
    {
      required: true,
      // message: "请输入账号",
      trigger: "blur",
      validator: matchUsername,
    },
  ],
  password: [
    {
      required: true,
      // message: "请输入密码",
      trigger: "blur",
      validator: valiPassword,
    },
  ],
  confirmPassword: [
    {
      required: true,
      // message: "请确认密码",
      trigger: "blur",
      validator: matchPassword,
    },
  ],
  valicode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
});

// 提交表单
const submitForm = async (formEl: FormInstance | undefined) => {
  try {
    data.submitLoading = true;
    if (!formEl) {
      console.log("Form instance is undefined.");
      return; // 提前返回，避免后续的 null 引用错误
    }
    // 将 validate 调用转换为支持 async/await 的形式
    const valid = await new Promise((resolve) => formEl.validate(resolve));
    if (valid) {
      // 请求修改密码
      await AccountApi.editPwd(data.editPwd);
      ElMessage.success("密码修改成功"); // 修改消息文本以反映操作的性质
      backLogin();
    }
  } catch (error) {
    console.log("error", error);
  } finally {
    data.submitLoading = false; // 确保关闭加载指示
  }
};

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 取消修改
const cancel = () => {
  backLogin();
};

// 返回登录
const backLogin = () => {
  router.replace({ path: "/login" });
};

const { submitLoading, editPwd } = toRefs(data);
</script>
<style lang="less" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100vh; /* 设置页面高度为视口高度，保证视频全屏显示 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持视频比例不变，覆盖整个容器 */
    z-index: -1; /* 将视频放置在最底层，防止遮挡其他内容 */
  }
  .login-form-container {
    /* 根据需要设置登录表单的样式 */
    width: 450px;
    height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8);
    .login-form {
      margin-top: 20px;
      .btn_style {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
      .el-input {
        width: 245px;
      }
      .el-button {
        width: 23%;
        margin-top: 10px;
      }
    }
  }
}
</style>
